.foot-detail {
  .detail-pic {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detail-content {
    margin-top: 40px;
    margin-bottom: 200px;
  }

  .detail-foot {
    margin: 100px 0 20px 0;
    border-bottom: 2px solid rgba(0, 0, 0, .12);
    position: relative;
    vertical-align: baseline;
    .avatar {
      vertical-align: baseline;
      display: inline-block;
      width: 150px;
      height: 150px;
      margin-right: 40px;
      margin-top: -50px;
      img {
        width: 150px;
        height: 150px;

      }
    }
    .detail-foot-author {
      position: relative;
      top: -10px;
      vertical-align: baseline;
      font: inherit;
      display: inline-block;
      p {
        font-size: 55px;
        width: auto;
        display: block;
      }
      span {
        opacity: .7;
      }
    }
    .detail-focus {
      float: right;
      display: inline-block;
      .focused {
        color: darkgray;
      }
      i {
        font-size: 80px;
        display: block;
        color: grey;
      }
    }
  }

  .detail-like {
    margin-top: 50px;
    height: 120px;
    .avatar {
      display: inline-block;
      margin-right: 40px;
      width: 110px;
      height: 110px;
      img {
        width: 110px;
        height: 110px;
      }
    }

    .like {
      float: right;
      color: grey;
      i {
        display: block;
        color: darkgray;
      }
      p {
        text-align: center;
        display: block;
      }
    }
  }
  .detail-location {
    color: grey;

    i {
      float: left;
      font-size: 50px;
      display: inline-block;
    }
    p {

      font-size: 50px;
      display: inline-block;
      line-height: 60px;
    }
  }
  .detail-component {
    margin-top: 40px;
    margin-bottom: 300px;
    .component-title {
      background-color: #efefef;
      height: 100px;
      text-align: center;
      padding-top: 25px;
      p {
        width: auto;
        display: inline-block;
        color: grey;
        font-size: 40px;
      }
    }

    .mdui-list-item {
      padding: 0;
      border-bottom: 2px solid rgba(0, 0, 0, .12);
      .mdui-list-item-content {
        padding-bottom: 10px;
        padding-top: 15px;
        .mdui-list-item-title {
          position: relative;
          span {
            font-size: 38px;
            position: absolute;
            right: 15px;
            color: grey;
          }
          font-size: 42px;
        }
      }
    }

  }
  .takeComment {
    position: fixed;
    width: 92%;
    bottom: 140px;
    .mdui-textfield {
      position: relative;
      background-color: white;
      .mdui-textfield-input {
        font-size: 40px;
      }
      .sendBtn {

        width: 40px;
        height: 40px;
        position: absolute;
        right: 60px;
        i {
          font-size: 80px;
        }

      }

      .mdui-textfield-input:hover {
        border-bottom-color: #17c052;
        box-shadow: 0 1px 0 0 #17c052;
      }
    }
  }
  .back {
    padding-top: 50px;
    width: 95%;
    .backIcon {
      width: 100px;
      float: left;
      i {
        font-size: 120px;
        color: grey;
      }

    }
    .backHeader {
      width: 80%;
      height: 120px;
      font-size: large;
      line-height: 120px;
    }
  }
}
